<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
    <meta charset="UTF-8">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
<title>物流公司-注册</title>
<link rel="stylesheet" th:href="@{/layui/2.3.0/css/layui.css?t=1527693307626}"  media="all">
<style>
.layout1_foot{
position:relative;
	text-align:center;
	color:#fff;
	width: 100%;
    height: 46px;
    background: #242527;
}
.layui-input-block{
margin-left:0px;
}
.layui-form-item .layui-input-inline{
width:100%;
}
@media screen and (min-width: 768px){
#content{
	margin-top:60px;
}
}
@media screen and (max-width: 450px){
#content{
	margin-top:0px;
	margin-bottom:20px;
}
.layui-form-item .layui-inline{
display:inline;margin-left:5px;
margin-bottom:5px;
}
.layui-col-xs7 .layui-col-xs4{
display:inline;
}
.layui-form-item .layui-input-inline {
    margin: 0 0 0 0;
    display:inline;
}
}
</style>
 </head>
<body>
<ul class="layui-nav">
   <li class="layui-nav-item"><a href=""><img th:attr="src=@{/images/logo.jpeg}" style="width:100px;height:40px;"></a></li>
</ul>
<div style="padding: 20px; background-color: #F2F2F2;">

<div  id="content" class="layui-row layui-col-space15" style="height:500px;">
  
    <div class="layui-col-md6 layui-col-sm8 layui-col-xs12 layui-col-md-offset3 layui-col-sm-offset2">
      <div class="layui-card">
        <div class="layui-card-header" style="height:68px;line-height:68px;margin-left:46px;">
        <span style="font-size:18px;">注册企业账户(物流公司)</span>
        <div style="float:right;">已拥有账号?<a th:href="${loginUrl}" style="color:#2FA0ED;border-bottom:1px solid #2FA0ED">立即登录</a></div>
        </div>
        <div class="layui-card-body">
         <form class="layui-form layui-row">
		  <div class="layui-form-item layui-col-md8  layui-col-md-offset2 layui-col-sm12 layui-col-xs12">
		    <div class="layui-input-inline " >
		      <input type="text"  name="mobile" lay-verify="title" maxlength=11  minlength=11 autocomplete="off" placeholder="请输入手机号" class="layui-input">
		    </div>
		  </div>
		  <div class="layui-form-item layui-col-md8  layui-col-md-offset2 layui-col-sm12 layui-col-xs12">
		   <div class="layui-inline layui-col-md8 layui-col-sm8  layui-col-xs7">
		      <div class="layui-input-inline ">
		          <input type="text" name="authCode" lay-verify="required" placeholder="请输入图形验证码" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <div class="layui-input-inline  layui-col-md3  layui-col-sm3 layui-col-xs3" >
		        <img src="./../../reg/vcode" id="image" class="layui-btn layui-btn-primary" onclick="changeImage(this)"style="height:38px;"/>
		      </div>
		    </div>
		  </div>
		  
		  <div class="layui-form-item layui-col-md8  layui-col-md-offset2 ">
		  	 <div class="layui-inline  layui-col-md8  layui-col-sm8  layui-col-xs7">
		      <div class="layui-input-inline">
		         <input type="text" name="smsCode" lay-verify="required"placeholder="请输入短信验证码" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline  layui-col-md3 layui-col-sm3">
		      <div class="layui-input-inline layui-col-xs4">
		        <button class="layui-btn  layui-btn-normal" type="button" id="sendbtn" title="获取验证码">获取验证码</button>
		      </div>
		    </div>
		  </div>
		  <div class="layui-form-item layui-col-md8  layui-col-md-offset2 layui-col-sm12">
		    <div class="layui-input-inline">
		      <input type="password" style="" name="password" lay-verify="title" autocomplete="off" placeholder="请设置密码(6-16位数字及大小写字母)" class="layui-input">
		    </div>
		  </div>
		  <div class="layui-form-item layui-col-md8  layui-col-md-offset2" >
		    <div class="layui-input-inline">
		      <input type="checkbox" name="agree" lay-skin="primary" title="我已阅读并同意<a target='_blank' style='color:#2FA0ED;' href='./../../reg/protocol.html'>《服务协议》</a>" checked="">
		    </div>
		  </div>
		  <div class="layui-form-item layui-col-md8  layui-col-md-offset2">
		  <div class="layui-input-inline">
		   <button class="layui-btn  layui-btn-normal layui-btn-fluid" type="button" id="submitBtn">下一步</button>
		   </div>
		   </div>
		 </form>
        </div>
      </div>
    </div>
  </div>

  </div> 
<div class="layout1_foot" style="line-height:45px;">
<p>四川锦云运输有限公司<label style="margin-left:10px;">粤ICP备14091972号</label></p>
</div>

<script th:attr="src=@{/layui/2.3.0/layui.all.js}" charset="utf-8"></script>
<script>
function changeImage(e){
	e.src='../../reg/vcode?_='+new Date().getTime()
}
function start($){
	var dur=60,btn=$("#sendbtn");
	btn.attr("disabled",true);
	function cal(){
		if(dur==0){
			btn.html(btn.attr("title"));
			btn.attr("disabled",false);
			window.clearInterval(clock);
		}else{
			btn.html("重发("+dur+"s)")
			dur--;
		}
		
	}
	var clock=window.setInterval(cal,1000);
}
layui.config({
    base: './../layui/2.3.0' //静态资源所在路径
  }).extend({
    index: '/lib/index' //主入口模块
  }).use([], function(){
    var $ = layui.jquery,layer = layui.layer;

  $("#sendbtn").click(function(){
	var me=this,mobile= $("[name=mobile]").val(),
	authCode=$("[name=authCode]").val();
	var url="./../sendSmsCode";
	$.post(url,{mobile:mobile,authCode:authCode},function(rs){
		if(rs["success"]){
			 layer.msg('发送成功');
			 start($);
		}else{
			layer.msg(rs["msg"]);
		}
	});
  });
  
  $("#submitBtn").click(function(){
	  
	  var me=this,mobile= $("[name=mobile]").val(),
		authCode=$("[name=authCode]").val(),
		smsCode=$("[name=smsCode]").val(),
		password=$("[name=password]").val(),
		agree=$("[name=agree]").get(0).checked;
	  if(!agree){
		  return layer.msg("请先同意协议");
	  }
	  if(!authCode){
		  return layer.msg("请先填写验证码");
	  }
	  if(!mobile||!smsCode){
		  return layer.msg("请先验证手机号");
	  }
	  if(!password){
		  return layer.msg("请设置登录密码")
	  }
	  if(password.length<6||password.length>16){
		  return layer.msg("密码应为6-16位的数字或大小写字母")
	  }
	  
		var url="./../unit/step1";
		$.post(url,{mobile:mobile,authCode:authCode,smsCode:smsCode,password:password},function(rs){
			if(rs["success"]){
				window.location.href="./../trans/page2.html";
			}else{
				layer.msg(rs["msg"]||"验证失败");
				changeImage($("#image").get(0));
			}
		});
  });
  });
</script>
</body>
</html>
